<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import TagGroup from "./TagGroup.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";
    import Button from "../Button/Button.svelte";
    import { Avatar } from "../Avatar";

    const { Story } = defineMeta({
        title: "Components/Base/TagGroup",
        component: TagGroup,
        tags: ["autodocs"],
        argTypes: {
            size: {
                control: "select",
                options: ["small", "default", "large", "xlarge"],
            },
        },
        args: {},
    });

    let width = $state(40);
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="background-color: var(--cui-color-fill-0); padding: 5px">
            <TagGroup
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                ]}
            />
        </div>
    {/snippet}
</Story>

<Story name="ShowMore">
    {#snippet template(args)}
        <div style="background-color: var(--cui-color-fill-0); padding: 5px; margin-top: 100px;">
            <TagGroup
                closable
                max={2}
                showMore
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                    { id: "3", title: "标签三" },
                    { id: "4", title: "标签四" },
                ]}
            />
        </div>
    {/snippet}
</Story>

<Story name="TooltipTrigger">
    {#snippet template(args)}
        <div style="background-color: var(--cui-color-fill-0); padding: 5px; margin-top: 100px;">
            <TagGroup
                closable
                max={2}
                showMore
                tooltipTrigger="click"
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                    { id: "3", title: "标签三" },
                    { id: "4", title: "标签四" },
                ]}
            />
        </div>
    {/snippet}
</Story>

<Story name="TooltipStyle">
    {#snippet template(args)}
        <div style="background-color: var(--cui-color-fill-0); padding: 5px; margin-top: 100px;">
            <TagGroup
                closable
                max={2}
                showMore
                tooltipStyle="max-width: 200px"
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                    { id: "3", title: "标签三" },
                    { id: "4", title: "标签四" },
                    { id: "5", title: "标签五" },
                    { id: "6", title: "标签六" },
                    { id: "7", title: "标签七" },
                    { id: "8", title: "标签八" },
                    { id: "9", title: "标签九" },
                ]}
            />
        </div>
    {/snippet}
</Story>

<Story name="moreCloseable">
    {#snippet template(args)}
        <div style="background-color: var(--cui-color-fill-0); padding: 5px; margin-top: 100px;">
            <TagGroup
                closable
                max={2}
                showMore
                tooltipStyle="max-width: 200px"
                moreCloseable
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                    { id: "3", title: "标签三" },
                    { id: "4", title: "标签四" },
                    { id: "5", title: "标签五" },
                    { id: "6", title: "标签六" },
                    { id: "7", title: "标签七" },
                    { id: "8", title: "标签八" },
                    { id: "9", title: "标签九" },
                ]}
            />
        </div>
    {/snippet}
</Story>

<Story name="moreAuto">
    {#snippet template(args)}
        <div style="background-color: var(--cui-color-fill-0); padding: 5px; margin-top: 100px;" style:width={`${width}%`}>
            <TagGroup
                max="auto"
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                    { id: "3", title: "标签三" },
                    { id: "4", title: "标签四" },
                    { id: "5", title: "标签五" },
                    { id: "6", title: "标签六" },
                    { id: "7", title: "标签七" },
                    { id: "8", title: "标签八" },
                    { id: "9", title: "标签九" },
                ]}
            />
        </div>
        <input type="range" bind:value={width} min="0" max="100" step="1" />
    {/snippet}
</Story>

<Story name="Checkable">
    {#snippet template(args)}
        <Space dir="v">
            <TagGroup
                checkable
                onchange={(v) => {
                    console.log(v);
                }}
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                    { id: "3", title: "标签三" },
                    { id: "4", title: "标签四" },
                ]}
            />

            <TagGroup
                checkable
                multi={false}
                onchange={(v) => {
                    console.log(v);
                }}
                data={[
                    { id: "1", title: "标签一" },
                    { id: "2", title: "标签二" },
                    { id: "3", title: "标签三" },
                    { id: "4", title: "标签四" },
                ]}
            />
        </Space>
    {/snippet}
</Story>
